<template>
  <div class="app">
    <el-table :data="list" border>
        <el-table-column label="ID" prop="goods_id"></el-table-column>
        <el-table-column label="商品" prop="goods_name"></el-table-column>
        <el-table-column label="价格" prop="goods_price"></el-table-column>
        <el-table-column label="操作" prop="goods_id">
            <template v-slot="{ row }">
                <el-button type="danger" link @click="delRow(row.goods_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    {{ name }}
  </div>
</template>
<script>
import { ref, reactive, computed, watch, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
export default {
  name: '',
  setup () {
    // 获取列表数据  通过ref称为响应式的
    const name = ref("string")
    const list = ref([]);
    const getList = async () => {
        const res = await axios.get("https://applet-base-api-t.itheima.net/api/cart");
        list.value = res.data.list
        name.value = "fajlf"
    }
    onMounted(() => {
        getList();
    });
    // 删除数据
    const delRow = async (id) => {
        list.value = list.value.filter(item=>item.goods_id!== id)
    }
    return {
        list, name, delRow
    };
  },
}
</script>
<style scoped>

</style>